<template>
	<div id="app">
		<div>第一步：</div>
		<div>
			请先给自己取个名字吧：<input type="text" v-model="myName">
		</div>
		<div>
			这是你的id,想让别人call你的话就复制下来发给需要TA的人吧: {{socketID}}
		</div>
		<br />
		<div>第二步：</div>
		<div>
			你要call别人吗？那就输入对方id吧: <input type="text" v-model="userSocketID">
		</div>

		<br />
		<div>第三步：</div>
		<div>
			<button class="call_btn" @click="callClick()">要是想call TA 就点我吧</button>
			<div style="display:flex;">
				<div>
					<div>提示：</div>
					<img style="height:300px;width: 500px;" src="../../assets/image/icon-defalut.png">
				</div>
				<div style="margin-left:20px;">
					<div>不要点取消，点取消就会弹这个,那就再点一次 call TA</div>
					<img style="height:300px;width: 300px;" src="../../assets/image/defalut.png">
				</div>
			</div>
		</div>


		<div class="user_row">
			<div class="user_nav">
				<div>{{myName}}</div>
				<div class="video_item">
					<video autoplay ref="user_video" controls></video>
				</div>
			</div>

			<div class="user_nav">
				<div>{{otherName}}</div>
				<div class="video_item">
					<video autoplay ref="userTwo_video" controls></video>
				</div>
			</div>

			<div>
				<button style="margin-left:20px;height: 300px;width: 300px;" v-show="isAnswerShow"
					@click="answerCall()">来电话了，点击接听 ,大一点才看的见</button>
			</div>
		</div>


	</div>
</template>

<script setup lang="ts">
	const Peer = require("simple-peer");
	import io from 'socket.io-client';
	import {
		onMounted,
		ref,
		reactive
	} from 'vue'
	let user_video = ref < HTMLDocument > (null)
	let userTwo_video = ref < HTMLDocument > (null)
	let data = reactive({
		myName: '',
		otherName: '',
		socket: null,
		socketID: '',
		userSocketID: '',
		curStream: null,
		userStream: null,
		isAnswerShow: false,
		caller: null,
		callerSignal: null,
	})
	const getSocketId = () => {
		data.socket.on('me', (res) => {
			data.socketID = res
		});
		//接听方获取从服务器传递的发起方数据
		data.socket.on('callUser', (data) => {
			console.log('来电了，拨打发信息', data);
			if (data) {
				data.isAnswerShow = true
				data.caller = data.from
				data.callerSignal = data.signal
			}
		});
	}
	// 点击拨打电话
	const callClick = async () => {
		if (!data.myName) {
			alert('你为什么不给自己取名字？？？')
			return
		}
		if (!data.userSocketID) {
			alert('call TA 就要填TA的id呀，伤脑筋')
			return
		}

		var options = {
			audio: true,
			video: true,
		}
		try {
			data.curStream = await navigator.mediaDevices.getDisplayMedia(options)
			data.user_video.srcObject = data.curStream
		} catch (err) {
			alert('点分享呀')
			return
		}

		//实例化对等连接对象
		var peer = new Peer({
			initiator: true,
			stream: data.curStream,
			trickle: false,
		});

		//传递信令数据
		peer.on('signal', (data) => {
			data.socket.emit('callUser', {
				userToCall: data.userSocketID,
				signalData: data,
				from: data.socketID,
				name: data.myName,
			});
		});

		//获取对方的stream
		peer.on('stream', (stream) => {
			console.log(stream);
			data.userTwo_video.srcObject = stream
		});

		//当接听方同意通话后获取信令
		data.socket.on('callAccepted', (signal) => {
			peer.signal(signal);
		});
	}

	// 点击接听电话
	const answerCall = async () => {
		var constraints = {
			audio: true,
			video: true
		}
		var screen = await navigator.mediaDevices.getDisplayMedia(constraints)
		this.$refs.userTwo_video.srcObject = screen
		this.userStream = screen

		var peer = new Peer({
			initiator: false,
			stream: this.userStream,
			trickle: false,
		});

		peer.on('signal', (data) => {
			this.socket.emit('answerCall', {
				signal: data,
				to: this.caller,
			});
		});

		peer.on('stream', (stream) => {
			this.$refs.user_video.srcObject = stream
		});

		peer.signal(this.callerSignal);
	}
	onMounted(() => {
		data.socket = io.connect('https://192.168.2.49:9002')
	})
</script>

<style>
	.user_row {
		margin-top: 20px;
		display: flex;
	}

	.user_nav {
		margin-right: 20px;
	}

	.video_item {
		display: block;
		height: 200px;
		width: 200px;
		border: 1px solid #333;
	}

	.video_item>video {
		height: 100%;
		width: 100%;
		object-fit: fill;
	}

	.call_btn {
		margin-top: 10px;
	}
</style>
